import React, { useState, Suspense, lazy } from 'react';
import { Route, Switch, Redirect, useHistory } from 'react-router-dom';
import Demo from '../pages/Demo';
import '../App.less';
import {
  DesktopOutlined,
  FileOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
} from '@ant-design/icons';
import { Breadcrumb, Layout, Menu } from 'antd';

const { Header, Content, Footer, Sider } = Layout;

const TodoList = lazy(() => import('../pages/Todo/TodoList'));
const CommentList = lazy(() => import('../pages/CommentList'));
const StateUpgrade = lazy(() => import('../pages/StateUpgrade'));
const ContextSample = lazy(() => import('../pages/ContextSample'));
const RefsSample = lazy(() => import('../pages/RefsSample'));
const PortalsSample = lazy(() => import('../pages/PortalsSample'));
const RenderProps = lazy(() => import('../pages/RenderProps'));
const PropTypesSample = lazy(() => import('../pages/PropTypesSample'));
const WithJquery = lazy(() => import('../pages/WithJquery'));
const HookSample = lazy(() => import('../pages/HookSample'));
const ReactRedux = lazy(() => import('../pages/ReactRedux'));
const ReactMicroApp = lazy(() => import('../pages/MicroApp/ReactApp'));
const VueMicroApp = lazy(() => import('../pages/MicroApp/VueApp'));

function getItem(label, key, icon, children) {
  return {
    key,
    icon,
    children,
    label,
  };
}

const items = [
  getItem('demo', '0', <PieChartOutlined />),
  getItem('评价列表', '1', <PieChartOutlined />),
  getItem('todo列表', '2', <DesktopOutlined />),
  getItem('状态提升', '3', <UserOutlined />),
  getItem('context示例', '4', <TeamOutlined />),
  getItem('refs示例', '5', <FileOutlined />),
  getItem('portals示例', '6', <FileOutlined />),
  getItem('render props', '7', <FileOutlined />),
  getItem('PropTypes类型检查', '8', <FileOutlined />),
  getItem('集成jquery库', '9', <FileOutlined />),
  getItem('hook示例', '10', <FileOutlined />),
  getItem('react-redux示例', '11', <FileOutlined />),
  getItem('微应用', 'micro', <TeamOutlined />, [getItem('react子应用', 'reactApp'), getItem('vue子应用', 'vueApp')]),
  getItem('Team', 'sub2', <TeamOutlined />, [getItem('Team 1', 'sub26'), getItem('Team 2', 'sub28')]),
];

const Layouts = () => {
  const history = useHistory();
  
  const [collapsed, setCollapsed] = useState(false);

  const handleMenuClick = ({ item, key, keyPath, domEvent }) => {
    switch(key) {
      case '0': history.push('/demo'); break;
      case '1': history.push('/comment-list'); break;
      case '2': history.push('/todo-list'); break;
      case '3': history.push('/state-upgrade'); break;
      case '4': history.push('/context-sample'); break;
      case '5': history.push('/refs-sample'); break;
      case '6': history.push('/portals-sample'); break;
      case '7': history.push('/render-props'); break;
      case '8': history.push('/prop-types-sample'); break;
      case '9': history.push('/with-jquery'); break;
      case '10': history.push('/hook-sample'); break;
      case '11': history.push('/react-redux'); break;
      case 'reactApp': history.push('/react-micro-app'); break;
      case 'vueApp': history.push('/vue-micro-app'); break;
      default: break;
    }
  }

  return (
    <Layout
      style={{
        minHeight: '100vh',
      }}
    >
      <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
        <div className="logo" />
        <Menu theme="dark" onClick={handleMenuClick} defaultSelectedKeys={['sub2']} mode="inline" items={items} />
      </Sider>
      <Layout className="site-layout">
        <Header
          className="site-layout-background"
          style={{
            padding: 0,
          }}
        />
        <Content
          style={{
            margin: '0 16px',
          }}
        >
          <Breadcrumb
            style={{
              margin: '16px 0',
            }}
          >
            <Breadcrumb.Item>User</Breadcrumb.Item>
            <Breadcrumb.Item>Bill</Breadcrumb.Item>
          </Breadcrumb>
          <Suspense fallback={<div>Loading...</div>}>
            <Switch>
              <Route exact path="/">
                <Redirect to="/demo"/>
              </Route>
              <Route path="/demo" component={ Demo }></Route>
              <Route path="/comment-list" component={ CommentList }></Route>
              <Route path="/todo-list" component={ TodoList }></Route>
              <Route path="/state-upgrade" component={ StateUpgrade }></Route>
              <Route path="/context-sample" component={ ContextSample }></Route>
              <Route path="/refs-sample" component={ RefsSample }></Route>
              <Route path="/portals-sample" component={ PortalsSample }></Route>
              <Route path="/render-props" component={ RenderProps }></Route>
              <Route path="/prop-types-sample" component={ PropTypesSample }></Route>
              <Route path="/with-jquery" component={ WithJquery }></Route>
              <Route path="/hook-sample" component={ HookSample }></Route>
              <Route path="/react-redux" component={ ReactRedux }></Route>
              <Route path="/react-micro-app" component={ ReactMicroApp }></Route>
              <Route path="/vue-micro-app" component={ VueMicroApp }></Route>
            </Switch>
          </Suspense>
        </Content>
        <Footer
          style={{
            textAlign: 'center',
          }}
        >
          Ant Design ©2018 Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  );
};

export default Layouts;
